<template>
    <div class="prediction-container">
        <h1>购买金额预测</h1>
        <div class="form-group">
            <label>日期:</label>
            <input type="date" v-model="month" />
        </div>
        <button @click="getPrediction">获取预测结果</button>
        <div class="result" v-if="predictedPurchase !== null">
            预测购买金额：{{ predictedPurchase.toFixed(2) }}
        </div>
        <div class="error" v-if="errorMsg">
            错误：{{ errorMsg }}
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            month: '2025-08-01', // 默认日期
            predictedPurchase: null,
            errorMsg: ''
        }
    },
    methods: {
        async getPrediction() {
            console.log('当前选择的日期：', this.month);
            try {
                // 发 POST 请求到后端，仅传递日期参数
                const response = await fetch('http://localhost:5000/predict', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },

                    body: `Month=${this.month}`
                });

                const result = await response.json();
                if (result.success) {
                    this.predictedPurchase = result.predictedPurchase;
                    this.errorMsg = '';
                } else {
                    this.errorMsg = result.error;
                    this.predictedPurchase = null;
                }
            } catch (error) {
                this.errorMsg = `请求失败：${error.message}`;
                this.predictedPurchase = null;
            }
        }
    }
}
</script>

<style scoped>
.prediction-container {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.form-group {
    margin: 15px 0;
}

label {
    display: inline-block;
    width: 80px;
}

input {
    padding: 6px;
    width: 200px;
}

button {
    padding: 8px 20px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.result {
    margin-top: 20px;
    color: green;
}

.error {
    margin-top: 20px;
    color: red;
}
</style>
